<template>
	<view class="">
		<Trip v-if="role == 1" />
		<template v-if="role == 2">
			<TopBar :data="form" @change="handleChange" @touchmove.stop />
			<z-paging ref="paging" :fixed="false" use-page-scroll v-model="dataList" @query="queryList">
				<view class="comment-list" v-if="dataList.length>0">
					<Order @click="handleItemClick(item)" v-for="(item, index) in dataList" :key="index" :data="item" />
				</view>
			</z-paging>
		</template>
	</view>
</template>

<script setup>
	import Trip from '@/pages/trip/index.vue'
	import TopBar from './components/top_bar.vue'
	import Order from './components/order.vue'
	import {
		useUserStore
	} from '@/store/index.js'
	import {
		ref,
		onMounted,
	} from "vue";
	import {
		onShow
	} from '@dcloudio/uni-app'
	import order from '@/api/order.js'
	// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
	import {
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	const role = ref(1)
	onMounted(() => {
		role.value = useUserStore().role
		useUserStore().setTitle(role.value)
	})
	onShow(() => {
		role.value = useUserStore().role
		useUserStore().setTitle(role.value)
	})
	const dataList = ref([])
	const paging = ref()
	// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
	useZPaging(paging)
	const form = ref({})
	const handleChange = (e) => {
		form.value = e
		queryList(1, 10)
	}
	const queryList = async (pageNo, pageSize) => {
		const {
			status,
			info,
			data
		} = await order.pendingOrder({
			page: pageNo,
			page_size: pageSize,
			...form.value
		})
		if (status == 1) {
			paging.value.complete(data.list)
		}
	}
	const handleItemClick = (val) => {
		console.log(val);
		/* if (val.can_taking == 0) {
			uni.navigateTo({
				url: '/pages/user/earnest_money'
			})
		} else { */
			uni.navigateTo({
				url: '/pages/user/order_detail?id=' + val.id
			})
		// }
	}
</script>

<style lang="scss" scoped>
	.comment-list {
		padding: 20rpx 26rpx;
	}
</style>